<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    <!-- =====================header start========================== -->
    	<div class="header  ">
    	<div class="wrap">
    		<div class="l-header">
    			<ul>
    				<li><a href="#">小米商城</a></li>
    				<li><a href="#">MIUI</a></li>
    				<li><a href="#">米聊</a></li>
    				<li><a href="#">游戏</a></li>
    				<li><a href="#">多看阅读</a></li>
    				<li><a href="#">云服务</a></li>
    				<li><a href="#">小米网移动版</a></li>
    				<li><a href="#">问题反馈</a></li>
    				<li><a href="#">Select Region</a></li>
    			</ul>
    		</div>
    		<div class="r-header">
    			<div class="cart">
    				<a href="#" ><i class="iconfont">&#xe60c;</i>购物车（0）</a>
    			</div>	
    				<div class="login">
    				<li><a href="#">注册</a></li>
    				<li><a href="#">登录</a>|</li>
    				</div>
    		</div>
    		</div>
    	</div>
    <!-- =======================nav1 start======================== -->
   		<div class="nav wrap">
    	<div class="logo">
    		<a href="#">小米官网</a>
    	</div>
    	<div class="nav-list">
    		<ul>
    			<li><a href="#">小米手机</a></li>
    			<li><a href="#">红米</a></li>
    			<li><a href="#">平板</a></li>
    			<li><a href="#">电视</a></li>
    			<li><a href="#">盒子</a></li>
    			<li><a href="#">路由器</a></li>
    			<li><a href="#">智能硬件</a></li>
    			<li><a href="#">服务</a></li>
    			<li><a href="#">社区</a></li>
    		</ul>
    	</div>
    	<div class="search">
    		<input type="text" class="txt">
    		<input type="button"  value="&#xe616;" class="btn iconfont">
    		<div class="cube">
    			<a href="#">红米pro</a>
    			<a href="#">小米笔记本Air</a>
    		</div>
    	</div>
    	</div>
    <!-- =====================main start========================== -->
    	<div class="main wrap clearfix">
    		<div class="l-side">
    			<ul>
    				<li><a href="#">手机 平板 电话卡</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">电视 盒子</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">路由器 智能硬件</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#"> 移动电源 插线板</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">耳机 音箱</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">电池 存储卡</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">保护套 后盖</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">贴膜 其他配件</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">米兔 服装</a><i class="iconfont">&#xe623;</i></li>
    				<li><a href="#">箱包 其他周边</a><i class="iconfont">&#xe623;</i></li>
    			</ul>
    		</div>
    		<!-- right imgs -->
    		<div class="r-img">
    			<img src="images/banner.jpg" >
    		</div>
    	</div>
    <!-- =======================hot bot start ======================== -->
    	<div class="hot-bot wrap clearfix">
    		<div class="l-hot-bot">
    			<ul>
    				<li><a href="#"><i class="iconfont">&#xe63e;</i>选购手机</a></li>
    				<li><a href="#"><i class="iconfont">&#xe63e;</i>企业团购</a></li>
    				<li><a href="#"><i class="iconfont">&#xe63e;</i>官翻产品</a></li>
    				<li><a href="#"><i class="iconfont">&#xe900;</i>小米移动</a></li>
    				<li><a href="#"><i class="iconfont">&#xe900;</i>依旧换新</a></li>
    				<li><a href="#"><i class="iconfont">&#xe900;</i>话费充值</a></li>
    			</ul>
    		</div>
    		<!-- 右侧 -->
    		<div class="r-hotlist">
    			<ul>
    				<li><a href="#"><img src="1.jpg"></a></li>
    				<li><a href="#"><img src="2.jpg" alt=""></a></li>
    				<li class="fl-r"><a href="#"><img src="3.jpg" alt=""></a></li>
    			</ul>
    		</div>    		
    	</div>
    <!-- =======================小米明星单品start======================== -->
    <div class="sun-list wrap">
    	<h2>小米明星单品</h2>
    	<!-- <div class="r-arrow">
    		<a href="#" class="iconfont prev"></a>
    		<a href="#" class="iconfont next"></a>
    	</div> -->
    </div>
    <!-- ====================列表 public-one start=========================== -->
    <div class="sun-bo-list wrap clearfix">
    	<ul>
    		<li>
    			<a href="#"><img src="images/明星单品/2.jpg" alt=""></a>
    			<h3>小米产品 啦啦啦</h3>
    			<p class="p1">就问你买不买</p>
    			<p class="p2">$1013</p>
    		</li>
    		<li>
    			<a href="#"><img src="images/明星单品/1.jpg" alt=""></a>
    			<h3>小米产品 啦啦啦</h3>
    			<p class="p1">就问你买不买</p>
    			<p class="p2">$1013</p>
    		</li>
    		<li>
    			<a href="#"><img src="images/明星单品/3.jpg" alt=""></a>
    			<h3>小米产品 啦啦啦</h3>
    			<p class="p1">就问你买不买</p>
    			<p class="p2">$1013</p>
    		</li>
    		<li>
    			<a href="#"><img src="images/明星单品/4.jpg" alt=""></a>
    			<h3>小米产品 啦啦啦</h3>
    			<p class="p1">就问你买不买</p>
    			<p class="p2">$1013</p>
    		</li>
    		<li class="l-end">
    			<a href="#"><img src="images/明星单品/2.jpg" alt=""></a>
    			<h3>小米产品 啦啦啦</h3>
    			<p class="p1">就问你买不买</p>
    			<p class="p2">$1013</p>
    		</li>
    	</ul>
    </div>
    <!-- ========================public-list two start=========================== -->
    <div class="pagewrap">
      	<div class="public-list wrap">
    	<!-- ========================top side ================================ -->
    		<div class="top-box wrap clearfix">
    		<div class="l-pub-top">
    			<h2>搭配</h2>
    		</div>
    		<div class="r-pub-list">
    			<ul>
    				<li>热门</li>
    				<li>耳机音箱</li>
    				<li>电源</li>
    				<li>电池存储卡</li>
    			</ul>
    		</div>
    		</div>
    	<!-- ===========================product===================================== -->
    		<div class="pub-pro">
    		<div class="l-pub-pro">
    			<div class="l-top-img">
    				<img src="images/搭配/1.jpg" alt="">
    			</div>
    			<div class="l-bot-img">
    				<img src="images/搭配/2.jpg" alt="">
    			</div>
    		</div>
    		<!-- ===============product right================ -->
    		<div class="r-prli">
    			<ul>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    				<li>
    					<a href="#"><img src="images/listproduct/1.jpg" alt=""></a>
    					<h3>小米产品 啦啦啦</h3>
    					<p class="p1">买买买</p>
    					<p class="p2">$1013</p>
    				</li>
    			</ul>
    		</div>
    		</div>   	
      	</div>
    </div>
    <!-- =============================footer start=========================================== -->
    <div class="footer wrap">
    	<div class="foot-top">
    		<ul>
    			<li><a href="#"><i class="iconfont">&#xe634;</i>1小时快修服务</a></li>
    			<li><a href="#"><i class="iconfont">&#xe635;</i>7天无理由退货</a></li>
    			<li><a href="#"><i class="iconfont">&#xe636;</i>15天免费换货</a></li>
    			<li><a href="#"><i class="iconfont">&#xe638;</i>满150元包邮</a></li>
    			<li><a href="#"><i class="iconfont">&#xe637;</i>520余家售后网点</a></li>
    		</ul>
    	</div>

    	<div class="bot-dl">
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<dl>
				<dt>帮助中心</dt>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
				<dd><a href="#">购物指南</a></dd>
			</dl>
			<div class="right-dl">
				<p class="phone">400-100-5678</p>
				<p>
					<span>周一至周日 8:00-18:00</span>
					<br>
					<span>（仅收市话费）</span>
				</p>
				<a href="" class="contact"><i class="iconfont">&#xe600;</i>24小时在线客服</a>
			</div>
    	</div>
    </div>
    <!-- ========================bottom====================== -->
    <div class="bottom">
    	<div class="wrap">
    		<div class="bot-log">
    			<a href="">小米官网</a>
    		</div>
    		<div class="bottom-left">
    			<p class="list">
    				<a href="javascript://">小米网</a><span class="sep">|</span>
    				<a href="javascript://">MIUI</a><span class="sep">|</span>
    				<a href="javascript://">米聊</a><span class="sep">|</span>
    				<a href="javascript://">多看书城</a><span class="sep">|</span>
    				<a href="javascript://">小米路由器</a><span class="sep">|</span>
    				<a href="javascript://">视频电话</a><span class="sep">|</span>
    				<a href="javascript://">小米后院</a><span class="sep">|</span>
    				<a href="javascript://">小米天猫店</a><span class="sep">|</span>
    				<a href="javascript://">小米淘宝直营店</a><span class="sep">|</span>
    				<a href="javascript://">小米网盟</a><span class="sep">|</span>
    				<a href="javascript://">问题反馈</a><span class="sep">|</span>
    				<a href="javascript://">Select Region</a>
    			</p>
    			<p class="beian">
    				©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报电话：185-0130-1238 
    				<br>
					本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
    			</p>
    		</div>
    		<div class="bottom-right">
    			<a href="#"><img src="bot-logo-2.png" alt=""></a>
    			<a href="#"><img src="bot-logo-2.png" alt=""></a>
    			<a href="#"><img src="bot-logo-2.png" alt=""></a>
    		</div>
    	</div>
    	
    </div>
    </body>
</html>